<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <div id="app"></div>
<script src="js/vue.js"></script>
<script>
  const app = Vue.createApp({
     setup(props, context){
        const {ref, computed} = Vue;

        let num1 = ref(10);

        // 计算属性
        let num2 = computed({
            get: ()=>{
                return num1.value * 10;
            },
            set: (res)=>{
                console.log(res);
                num1.value = res / 10;
            }
        });

        setTimeout(()=>{
            num2.value = 2000;
        }, 2000);

        // 定义一个函数
        const add = ()=>{
          num1.value += 10;
        }

        return {
          num1,
          num2,
          add
        }
     },
     template: `
       <div>
          <h2>属性: {{num1}}</h2>
          <h2>计算属性: {{num2}}</h2>
          <p>----------------------</p>
          <button @click="add()">变化</button>
       </div>
     `
  }).mount('#app');
</script>
</body>
</html>